<template>
  <div class="layout-good">
    <el-form ref="form" :model="good" :rules="rules" label-position="top" size="small">
      <el-form-item label="产品" prop="productCode">
        <el-select v-model="good.productCode" placeholder="请选择产品属性" @change="handleProductChange">
          <el-option
            v-for="item in productList"
            :key="item.productCode"
            :label="item.productName"
            :value="item.productCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品简介" prop="remarks">
        <el-input
          v-model="good.remarks"
          type="textarea"
          :rows="4"
          auto-complete="off"
          placeholder="请输入产品简介"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格" required>
        <hcbk-good-spec ref="goodSpec" :specList="productSpecList"></hcbk-good-spec>
      </el-form-item>
    </el-form>
    <div class="operate-button">
      <el-button @click="handleCancel" size="small">取 消</el-button>
      <el-button type="primary" @click="handleSave" size="small">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { getProductList } from "@/api/product";
import { createGood } from "@/api/good";
import GoodSpec from "./GoodSpec.vue";
const defaultGood = {};
export default {
  name: "Good",
  components: {
    HcbkGoodSpec: GoodSpec
  },
  data() {
    return {
      good: {
        id: "",
        productCode: "",
        remarks: ""
      },
      rules: {
        productCode: [
          { required: true, message: "请选择产品", trigger: "change" }
        ],
        remarks: [
          { required: true, message: "请输入商品简介", trigger: "blur" }
        ]
      },
      productList: [],
      productSpecList: []
    };
  },
  created() {
    this.getProductList();
  },
  mounted() {
    this.$goodSpec = this.$refs.goodSpec;
  },
  methods: {
    getProductList() {
      const params = { pageNum: 1, pageSize: 100 };
      getProductList(params).then(response => {
        this.productList = response.data.list;
      });
    },
    handleProductChange(productCode) {
      const product = this.productList.find(
        item => item.productCode === productCode
      );
      this.good.productName = product.productName;
      this.productSpecList = product.productSpecList;
    },
    handleCancel() {},
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const formData = { ...this.good };
          formData.goodsSpec = this.$goodSpec.getData();
          createGood(formData).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "新建成功",
                type: "success",
                duration: 1000
              });
            }
            this.$router.push({
              path: "/pms/good"
            });
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout-good {
  max-width: 1000px;
  margin: 0 auto;
  .operate-button {
    padding-top: 10px;
    text-align: center;
    .el-button {
      min-width: 100px;
    }
  }
  .el-form {
    .el-select {
      min-width: 480px;
    }
  }
}
</style>
